<template>
  <div class="vx-row">
    <div class="vx-col w-full md:w-1/3">
      <vx-card full>
        <template v-slot:header>
          <div class="title">
            <h4>资源树</h4>
            <vs-button
              color="primary"
              icon="icon-plus"
              icon-pack="feather"
              @click="addResource"
              size="small"
              :disabled="!isClickTree"
            >新增</vs-button>
          </div>
        </template>
        <div class="choose-applicaton pt-5 border-b-1">
          <h4 class="mb-3">{{appName}}</h4>
          <!-- <vs-select
            autocomplete
            class="selectExample"
            v-model="selectApplication"
            label="选择应用"
            @change="getSelectApplication"
          >
            <vs-select-item
              :key="selectItemIndex"
              :value="selectItem.appKey"
              :text="selectItem.name"
              v-for="(selectItem,selectItemIndex) in selectList"
            />
          </vs-select>-->
        </div>
        <tree-component
          :data="treeData"
          @node-click="getItem"
          :render-content="renderContent"
          node-key="id"
          :default-expanded-keys="[0]"
        ></tree-component>
      </vx-card>
    </div>
    <div class="vx-col w-full md:w-2/3">
      <resource-info
        :parentData="resourceForm"
        :parentIsadd="isAdd"
        :parentType="parentType"
        :parentIsClickTree="isClickTree"
        :nowNode='nowNode'
        @reloadTree="reloadTreeData"
        @delSuccess="delResource"
      ></resource-info>
    </div>
  </div>
</template>

<script>
import ResourceInfo from "./ResourceInfo.vue";
import TreeComponent from "@/components/model-tree/ModelTree.vue";
import PROJECT_CONFIG from "@/../public/project.config";

export default {
  data() {
    return {
      // appKey: "",
      appName: "",
      nowNode:'',
      resourceForm: {
        permissionCode: "",
        name: "",
        remark: "",
        url: "",
        type: "",
        status: 1,
        sysAppKey: "",
        parentId: "",
        method:null
      },
      isAdd: false,
      isClickTree: false,
      popupActivo: false,
      parentNodeId: "",
      parentType: 1,
      treeData: [
        {
          id: 0,
          name: "资源",
          type: 0,
          children: []
        }
      ]
      // selectApplication: "",
      // selectAppkey: "",
      // selectList: []
    };
  },
  methods: {
    //资源树名称显示
    renderContent(h, { node }) {
      let iconSkin;
      if (node.data.type == 2) {
        iconSkin = "icon-page";
      } else if (node.data.type == 3 || node.data.type == 4) {
        iconSkin = "icon-button";
      } else {
        iconSkin = "icon-menu";
      }
      return (
        <span class="custom-tree-node flex items-center">
          <i class={`othericon ${iconSkin}`} />
          <span style="margin-left:5px;">{node.data.name}</span>
        </span>
      );
    },
    // 资源树-新增
    addResource() {
      
      this.isAdd = true;
      this.isClickTree = false;
      delete this.resourceForm.resourceId;
      // debugger
      Object.keys(this.resourceForm).forEach(v => {
        this.resourceForm[v] = "";
      });
      this.resourceForm.status = 1;
      this.parentNodeId
        ? (this.resourceForm.parentId = this.parentNodeId)
        : (this.resourceForm.parentId = 0);
      this.resourceForm.sysAppKey = PROJECT_CONFIG.appkey;
      if(this.parentNodeId == 0)
      this.resourceForm.root = true
    },
    //选择应用
    // getSelectApplication(appKey) {
    //   this.selectAppkey = appKey;
    //   this.getTree(appKey);
    // },

    //资源树-选择
    getItem(node) {
      console.log(node,"====-----////")
      
        this.isAdd = false;
        this.isClickTree = true;
        if(node.id)
        this.$api.accessControl
          .resourceTreeItem(node.id)
          .then(res => {
            this.nowNode = res.data.data
            Object.keys(this.resourceForm).forEach(v => {
              this.resourceForm[v] = res.data.data[v];
            });
            this.parentNodeId = node.id;
            this.parentType = node.type;
            this.resourceForm["resourceId"] = node.id;
            this.resourceForm.sysAppKey = PROJECT_CONFIG.appkey;
          })
          .catch(() => {});
        else{
          console.log(1)
          this.parentNodeId = node.id;
          this.resourceForm= {
            permissionCode: "",
            name: "",
            remark: "",
            url: "",
            type: 1,
            status: 1,
            sysAppKey: "",
            parentId: "",
            method:null
          }
        }
    },
    //获取资源树
    getTree() {
      // let appId = applicationId ? applicationId : this.selectList[0].appKey;
      // this.appKey = appId;
      this.appName = PROJECT_CONFIG.name;
      this.$api.accessControl
        .resourceTree()
        .then(res => {
          this.treeData[0].children = res.data.data;
          Object.keys(this.resourceForm).forEach(v => {
            this.resourceForm[v] = "";
          });
        })
        .catch(() => {});
    },
    reloadTreeData() {
      this.getTree();
    },
    delResource() {
      this.getTree();
    }
  },
  mounted() {
    //获取应用类
    this.getTree();
    //   })
    //   .catch(() => {});
  },
  components: {
    TreeComponent,
    ResourceInfo
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/baseColor.scss";
@import "~@/assets/fonts/other-icon/iconfont.css";
i.el-icon-folder-opened {
  height: 28px;
  font-size: 20px;
}
/deep/ i.othericon {
  color: $mainColor;
  font-size: 18px;
}

/deep/.vs-select--input {
  font-size: 11.9px;
}
.selectExample {
  width: 100%;
  display: flex;
  align-items: center;
  /deep/.vs-select--label {
    margin-right: 1rem;
  }
}
.title {
  display: flex;
  justify-content: space-between;
}
.choose-applicaton {
  display: flex;
  align-items: center;
}
</style>
